<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <!-- 未登录 -->
    <div class="banner" v-show="show">
      <div class="login" @click="login">
      <img src="../assets/mobile.png" alt="">
      <span>登录 / 注册</span>
      </div>
    </div>
    <!-- 登录 -->
    <div class="user" v-if="!show">
      <div class="user-p">
        <div class="left">
          <van-image
            width="60"
            height="60"
            round=""
            fit="cover"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
            <span>黑马头条号</span>
        </div>
        <div class="right">
          <span>编辑资料</span>
        </div>
      </div>
      <div class="content">
        <div class="con">
          <span>8</span>
          <span>头条</span>
        </div>
        <div class="con">
          <span>66</span>
          <span>关注</span>
        </div>
        <div class="con">
          <span>88</span>
          <span>粉丝</span>
        </div>
        <div class="con">
          <span>88</span>
          <span>获赞</span>
        </div>
      </div>
    </div>
    <!-- 登录 -->
    <div class="grid"  v-if="!show">
      <van-grid :column-num="2" clickable>
        <van-grid-item icon="star-o" text="收藏"  style="color:red"/>
        <van-grid-item icon="clock-o" text="历史"   style="color:#333"/>
      </van-grid>
    </div>
    <!-- 未登录 -->
    <div class="news"  v-if="show">
      <span>消息通知</span>
      <span icon="arrow">></span>
    </div>
     <div class="news"  v-if="show">
      <span>小智同学</span>
      <span icon="arrow">></span>
    </div>
    <!-- 未登录 -->
    <div class="out"  v-if="!show" @click="remove">
      退出登录
    </div>
  </div>
</template>

<script>
import { getToken, delToken } from '@/utils/storage'
export default {
  data () {
    return {
      show: true
    }
  },
  created () {
    const a = getToken()
    if (a) {
      this.show = !this.show
    }
  },
  methods: {
    login () {
      this.$router.push({
        path: '/login'
      })
    },
    remove () {
      delToken()
      this.$router.push({
        path: '/login'
      })
    }
  }
}
</script>

<style scoped lang='less'>
.banner{
  height: 173px;
  background: url(~@/assets/banner.png);
  background-size: cover;
  display: flex;
  justify-content: center;
  align-content: center;
  .login{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      img{
        width: 63px;
        height: 63px;
      }
      span{
        margin-top: 10px;
        text-align: center;
        color: #fff;
        font-size: 12px;
      }
  }
}
.user{
  height: 173px;
  background: url(~@/assets/banner.png);
 .user-p{
  height: 110px;
  // background-color: pink;
  padding: 27px 20px 11px ;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
    .left,.right{
        display: flex;
        // justify-content:center;
        align-items: center;
        // flex-direction: column;
        img{
          border: 3px solid #fff;
        }
        span{
          margin-left: 10px;
        }
  }
 }
 .content{
  height: 63px;
  // background-color: #cccccc;
  display: flex;
  .con{
    flex: 1;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
 }
}
.news{
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #ccc;

 }
 .out{
  font-size: 30px;
  text-align: center;
  color: red;
  margin-top: 10px;
  border: 1px solid #ccc;
 }
</style>
